<!-- 顶部菜单 -->
<template>
  <div class="tab_component">
    <ul class="tab_component_ul">
      <li
        class="tab_component_li"
        v-for="(itemPerson,index) in tabs" :key="index"
        @click="tab(index)"
        @mouseover="mouseover(index)"
        @mouseout="mouseout(index)">

        <img v-if="index === 0" :src="require('_as/index_1.png')" alt="">
        <span :class="{activeTitle:index == num}">
          <i :class="itemPerson.iconfont"></i>
          {{itemPerson.tabTitle}}
        </span>

        <div class="bgImg">
          <!-- 带色背景 -->
          <img v-show="index == num || index == imgShow" :src="require('_as/navlist.png')" alt="">
        </div>

        <transition name="fade" :duration="{ enter: 800, leave: 100 }">
          <ul class="tab_child" v-show="index == spanShow && spanBool && itemPerson.tabChild.length > 0">
            <li class="tab_child_li" v-for="(item, n) in itemPerson.tabChild" :key="n" @click.stop="toTabChilld(item, itemPerson)">{{item.value}}</li>
          </ul>
        </transition>

      </li>
    </ul>

  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      tabs: [
        {
          id: '0',
          tabTitle: '网站首页',
          iconfont: '',
          tabChild: []
        },
        {
          id: '1',
          tabTitle: '鰼国故里',
          iconfont: 'iconfont icon-fuwudiqiu',
          tabChild: [
            {
              id: '1-1',
              value: '习水旅游概况'
            },
            {
              id: '1-2',
              value: '习水地形'
            },
            {
              id: '1-3',
              value: '习水气候'
            },
            {
              id: '1-4',
              value: '人文历史'
            },
            {
              id: '1-5',
              value: '民风民俗'
            }
          ]
        },
        {
          id: '2',
          tabTitle: '畅游鰼国',
          iconfont: 'iconfont icon-yunyingguanli',
          tabChild: [
            {
              id: '2-1',
              value: '食遍习水'
            },
            {
              id: '2-2',
              value: '住在习水'
            },
            {
              id: '2-3',
              value: '交通习水'
            },
            {
              id: '2-4',
              value: '游遍习水'
            },
            {
              id: '2-5',
              value: '购物习水'
            },
            {
              id: '2-6',
              value: '娱享习水'
            },
            {
              id: '2-7',
              value: '旅游路线'
            }
          ]
        },
        {
          id: '3',
          tabTitle: '资讯服务',
          iconfont: 'iconfont icon-daibanshixiang',
          tabChild: [
            {
              id: '3-1',
              value: '票务政策'
            },
            {
              id: '3-2',
              value: '客服中心'
            },
            {
              id: '3-3',
              value: '温馨提示'
            },
            {
              id: '3-4',
              value: '常用电话'
            },
            {
              id: '3-5',
              value: '新闻资讯'
            },
            {
              id: '3-6',
              value: '出租行'
            },
            {
              id: '3-7',
              value: '旅行社'
            }
          ]
        },
        {
          id: '4',
          tabTitle: '游客论坛',
          iconfont: 'iconfont icon-gongnengdingyi',
          tabChild: [
            // {
            //   id: '4-1',
            //   value: '问题解答'
            // },
            // {
            //   id: '4-2',
            //   value: '游客反馈'
            // },
            // {
            //   id: '4-3',
            //   value: '问卷调查'
            // },
            // {
            //   id: '4-4',
            //   value: '失物招领'
            // },
            // {
            //   id: '4-5',
            //   value: '游客投诉'
            // }
          ]
        }
      ],
      num: 0,
      imgShow: 0,
      spanShow: 0,
      spanBool: false
    }
  },
  // 监听路由(keep-alive子路由router-view(路径匹配到的视图组件都会被缓存！))，通过刷新页面时控制navMenu的Tab
  watch: {
    '$route' (to, from) {
      switch (this.$route.name) {
        case 'Home':
          this.num = 0
          break
        case 'Birthland':
          this.num = 1
          break
        case 'Horizontal':
          this.num = 1
          break
        case 'Sightseeing_Tour':
          this.num = 2
          break
        case 'SightseeingTourSecondary':
          this.num = 2
          break
        case 'SightseeingTourDetails':
          this.num = 2
          break
        case 'hotelDetail':
          this.num = 2
          break
        case 'Consultation':
          this.num = 3
          break
        case 'ConsultationSecondary':
          this.num = 3
          break
        case 'Consultation_detail':
          this.num = 3
          break
        case 'Forum':
          this.num = 4
          break
        case 'ForumDetails':
          this.num = 4
          break
        default:
          break
      }
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    tab (index) {
      this.num = index
      this.spanShow = index
      switch (index) {
        case 0:
          this.$router.push('/home')
          break
        case 1:
          this.$router.push('/birthland')
          break
        case 2:
          this.$router.push('/sightseeing_tour')
          break
        case 3:
          this.$router.push('/consultation')
          break
        case 4:
          this.$router.push('/forum/4-1')
          break
      }
    },
    mouseover (index) {
      this.imgShow = index
      this.spanShow = index
      this.spanBool = true
    },
    mouseout () {
      this.imgShow = this.num
      this.spanShow = this.num
      this.spanBool = false
    },
    // 点击Tab子类，父类样式改变
    toTabChilld (item, itemPerson) {
      this.spanBool = false
      // 字符串转为数字
      this.num = parseInt(itemPerson.id)
      switch (item.id) {
        case '1-1':
          this.$router.push('/horizontal_tab/1-1')
          break
        case '1-2':
          this.$router.push('/horizontal_tab/1-2')
          break
        case '1-3':
          this.$router.push('/horizontal_tab/1-3')
          break
        case '1-4':
          this.$router.push('/horizontal_tab/1-4')
          break
        case '1-5':
          this.$router.push('/horizontal_tab/1-5')
          break
        case '1-6':
          this.$router.push('/horizontal_tab/1-6')
          break
        case '2-1':
          this.$router.push('/sightseeing_tour_secondary/2-1')
          break
        case '2-2':
          this.$router.push('/sightseeing_tour_secondary/2-2')
          break
        case '2-3':
          this.$router.push('/sightseeing_tour_secondary/2-3')
          break
        case '2-4':
          this.$router.push('/sightseeing_tour_secondary/2-4')
          break
        case '2-5':
          this.$router.push('/sightseeing_tour_secondary/2-5')
          break
        case '2-6':
          this.$router.push('/sightseeing_tour_secondary/2-6')
          break
        case '2-7':
          this.$router.push('/sightseeing_tour_secondary/2-7')
          break
        case '3-1':
          this.$router.push({
            path: '/consultation_secondary/3-1',
            query: {
              title: item.value
            }
          })
          break
        case '3-2':
          this.$router.push({
            path: '/consultation_secondary/3-2',
            query: {
              title: item.value
            }
          })
          break
        case '3-3':
          this.$router.push({
            path: '/consultation_secondary/3-3',
            query: {
              title: item.value
            }
          })
          break
        case '3-4':
          this.$router.push({
            path: '/consultation_secondary/3-4',
            query: {
              title: item.value
            }
          })
          break
        case '3-5':
          this.$router.push({
            path: '/consultation_secondary/3-5',
            query: {
              title: item.value
            }
          })
          break
        case '3-6':
          this.$router.push({
            path: '/consultation_secondary/3-6',
            query: {
              title: item.value
            }
          })
          break
        case '3-7':
          this.$router.push({
            path: '/consultation_secondary/3-7',
            query: {
              title: item.value
            }
          })
          break
        case '4-1':
          this.$router.push('/forum/4-1')
          break
        default:
          this.$router.push('/')
          break
      }
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.tab_component_ul {
  position relative
  display flex
  justify-content flex-start
  background rgba(50,66,71,0.5)
  height 64px
  line-height 64px
  background-size 80%
  img {
    position absolute
    top 0
    left 0
    width 148px
    height 64px
    z-index 503
  }
  .tab_component_li {
    position relative
    width 148px
    height 64px
    line-height 64px
    cursor default
    text-align center
    &:hover {
      color #fff
    }
    span {
      position absolute
      left 29px
      top 0
      width 93px
      z-index 501
      color #fff
    }
    .bgImg {
      position absolute
      top 0px
      left 0
      width 150px
      height 64px
      height 100%
      z-index 500
      border-left 1px solid rgba(255,255,255,0.5)
      img {
        width 148px
        height 64px
      }
    }
  }
}
.tab_child {
  width 146px
  color #fff
  margin 64px 0 0 2px
  background-image url(../../assets/img/tabChild_bg.png)
  .tab_child_li {
    display flex
    justify-content center
    &:hover {
      background rgba(34,69,151, 1)
      color #fff
    }
  }
}
.activeTitle {
  color #fff
}
.tabCon {
  background #999
}
.fade-enter-active, .fade-leave-active {
  transition opacity 1.5s
}
.fade-enter, .fade-leave-to {
  opacity 0
}
</style>
